<template>
    <view class="give-friend common-interval">
        <view class="title">请输入好友绑定的手机号码</view>
        <view class="bind-phone">
            <text class="icon-phone icon-btn"/>
            <input class="uni-input" v-model="phone" placeholder="请输入手机号码" placeholder-style="color: #999"/>
        </view>
        <text class="common-txt" @tap="giveMcardt">确认赠送</text>
        <view class="tips">*当被赠送人绑定手机号时，会员自动开通</view>
    </view>
</template>

<script>
    import service from "@/service";
    export default {
        name: "giveFriend",
        data(){
            return{
                phone: '',
                vipCardMemberLogId: ''
            }
        },
        onLoad(params){
            let { vipCardMemberLogId } = params
            this.vipCardMemberLogId = vipCardMemberLogId
        },
        methods: {
            giveMcardt(){
                if(!this.phone) {
                    uni.showToast({
                        title: `请输入赠送手机号`,
                        duration: 2500,
                        icon: 'none'
                    });
                    return;
                }
                uni.showLoading({
                    title: '',
                });
                service.mineService.giveMcardt({
                    data: {
                        vipCardMemberLogId: this.vipCardMemberLogId,
                        phone: this.phone
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            uni.showToast({
                                title: `赠送成功`,
                                duration: 2500,
                                icon: 'none'
                            });
                            uni.navigateTo({
                                url: `./vip-center?type=${2}`
                            })
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .title{
        font-size: 36rpx;
        margin: 56rpx 0 48rpx 0;
    }
    .bind-phone{
        width:690rpx;
        height:96rpx;
        border:1rpx solid rgba(229,229,229,1);
        opacity:1;
        border-radius:4rpx;
        display: flex;
        align-items: center;
        margin-bottom: 47rpx;
        .icon-btn{
            font-size: 50rpx;
            color: #2BA8FC;
            margin-left: 21rpx;
        }
        .uni-input{
            width: 470rpx;
            height: 100%;
            margin-left: 50rpx;
        }
    }
    .tips{
        color: #999999;
        margin-top: 30rpx;
        text-align: center;
    }
    .give-btn{
        width:690rpx;
        height:88rpx;
        background:rgba(43,168,252,1);
        border-radius:44rpx;
    }
</style>